import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
// 1.引入组件
import ElementUI from  '../components/ElementUI.vue'
import Home from '../components/Home.vue'//这个组件名是自己取的 不过下面设置路由时要对应
import User from '../components/user/user.vue'
import AddItem from '../components/items/addItem.vue'
import Item from '../components/items/Item.vue'
import ItemCat from '../components/items/ItemCat.vue'
import Welcome from '../components/Welcome.vue'

// *************************************************
//自己的Vue 用于插入更新数据等操作
import MyVue from '../components/MyVue.vue'
import Test from '../components/Test.vue'
// *************************************************
Vue.use(VueRouter)
const routes = [
  { path: '/', redirect: '/login' },
  { path: '/login', component: Login },// login
  // 2.定义路由
  { path: `/elementUI`, component: ElementUI},
  { path:`/home`, component: Home,redirect:'/welcome',children:[
    { path:`/user`, component: User },
    { path:`/item`, component: Item },
    { path:`/item/addItem`, component: AddItem },
    { path:`/itemCat`, component: ItemCat },
    // { path:`/`, redirect:'/welcome' },//写在这也行
    { path:`/welcome`, component: Welcome },

  ] },

  // *************************************************
  //自己的组件
  { path:`/myVue`, component: MyVue},
  { path:`/test`, component: Test}
  // *************************************************
]




//配置路由对象
const router = new VueRouter({
  routes
})



 //  2.定义导航守卫(注意位置)
 //   beforeEach: 循环遍历用户的所有的请求.(拦截)
 //               在其中需要定义一个回调函数(3个参数)
 //  参数介绍:  to :要访问的请求路径
 //            from: 从哪个页面跳转而来
 //            next: 表示请求放行
 //业务需求: 1.如果用户请求/login
 //         2.如果不是login则判断是否登录 token

/* 配置路由导航守卫 控制权限 Vue所提供的功能 */
//关于参数说明
//1.to  要跳转的网址 对象 具有path等属性
//2.from  请求从哪里来 对象 具有path等属性
//3.next 回调函数 放行/跳转 函数
router.beforeEach((to,from,next)=>{

  //1.如果用户访问/login 请求应该放行(next()) 终止程序(return)
  if(to.path==='/login') return next()
  //2.如果用户访问不是login 则需要校验是否登录 token
  let token = window.sessionStorage.getItem('token')
  //3.若token为空(null) 跳转到login页面
  if(!token) return next('/login')
  // //将所有请求放行
  next()
})//注:此处只是校验token是否为空 是一个演示 实际情况应该在后端存储一个token 然后与session里的token比较

export default router
